// 引入公共head.html
$("#head").load("./head.html", function () {
    // 引入公共head.js
    var sc = document.createElement("script");
    sc.src = "../js/head.js";
    $("body").append(sc);
    });

// 引入公共foot.html
$("#foot").load("./foot.html");


// 1, 获取 浏览器地址栏数据
const urlObj = getUrlObj();
console.log(urlObj);

let cat_arr = ['食品酒水', '童装玩具', '家装建材', '奶粉尿裤', '其他']
for (let i = 0; i < cat_arr.length; i++) {
    if (urlObj.cat_one_id === cat_arr[i]) {
        $('.title').html(urlObj.cat_one_id)
        $('.banner').css("background-image", "url(../images/header-banner" + (i + 1) + ".jpg" + ")");
    }
}



// cat_arr.forEach(function(item,index){
// })

// 2, 设定 显示页数 和 每页显示数据数量
let page = 1;
let line = 9;

// 调用函数 动态渲染生成页面
setPage();

// 定义函数 发送 ajax请求
// 获取 一级分类 对应的数据 动态生成页面
async function setPage() {
    const res = await myPromiseAjax('../server/goods_list.php', 'get', {
        cat_one_id: urlObj.cat_one_id,
        page: page,
        line: line
    }, 'json')
    console.log(res)

    let str = ''
    res.data.forEach(function (item, index) {
        console.log(item)
        // 每次写入的是li标签对象
        str += `
            <li class="list-item">
                <div class="panel panel-default">
                    <div class="panel-body">
                        <ol class="breadcrumb">
                            <li><a href="#">${item.cat_one_id}</a></li>
                            <li><a href="#">${item.cat_two_id}</a></li>
                            <li class="active">${item.cat_three_id}</li>
                        </ol>
                    </div>
                    <div class="panel-footer">
                        <div class="row">
                            <div class="">
                                <div class="thumbnail">
                                    <img data-src="${item.goods_big_logo}" alt="..." >
                                    <div class="caption">
                                        <h3>${item.goods_name}</h3>
                                        <p>
                                            <span>￥${item.goods_price}</span>
                                        </p>
                                        <p>
                                            <a href="javascript:;" class="btn btn-info" role="button">查找相似商品</a>
                                            <a href="./detail.html?goods_id=${item.goods_id}" class="btn btn-warning" role="button">查看商品详情</a>
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
            `;
    })

    $('.container>ul').html(str)


    // 只要渲染完毕页面, 执行 lazyload 图片懒加载
    lazyload()


    // 分页器插件设定功能
    // 以对象的形式设定 分页器插件的数据
    $('.box').pagination({
        pageCount: res.sumPage, // 总页数
        totalData: res.row, // 数据总数量
        current: res.page, // 当前第几页
        showData: res.line, // 每页显示的数据数量
        prevCls: 'prev', // 上一页的class
        nextCls: 'next', // 下一页的class
        prevContent: '上一页', // 上一页的文本内容
        nextContent: '下一页', // 下一页的文本内容
        activeCls: 'active', // 选中状态class类名
        count: 4, // 选中页 前后显示的按钮数量 设定4 一共显示 5个按钮
        mode: 'fixed', // 按钮数量固定
        coping: true, // 开启 首页 末页
        homePage: '首页', // 首页按钮 文本内容         
        endPage: '末页', // 末页按钮 文本内容 
        isHide: true, // 总页数为 0 或者 1 时 隐藏分页插件  
        jump: true, // 开启 跳转页设定
        callback: function (p) { // 触发 分页器 也就是 点击分页器按钮时 执行的函数程序
            // 定义一个 形参 插件 自动向这个形参存储数据
            console.log(p);
            // 其中 getCurrent() 是 获取当期页数
            // 将 获取的页数 赋值给 变量储存
            page = p.getCurrent();

            // 根据 新的页数 再次发起请求 动态生成页面
            setPage();

            // 当 点击 分页器插件时
            // 获取 点击的按钮 对应的 页数 将 页数的数值 赋值给 page变量储存
            // 再次发起请求 也就是 再次调用这个函数

        }
    });
}

// 图片懒加载
function lazyload() {
    const imgs = $('.list-item img')
    // console.log(imgs)

    imgs.each(function (index, item) {
        // item 就是每一个 img 标签
        // 如果这个 img 标签已经有 src 属性了, 说明已经加载过了，就不需要判断高度了
        if (item.src) {
            return
        }

        // 2-2. 拿到每一个图片距离顶部的尺寸
        const img_top = $(item).offset().top

        // // 可视区高度
        const window_height = $(window).height()

        // // 滚动条的位置
        const scroll_top = $(window).scrollTop()

        if (img_top - 50 <= window_height + scroll_top) {
            item.src = item.dataset.src
        }
    })
}

// 页面滚动
$(window).scroll(function () {
    // 页面上卷高度
    var scrollTop = $(document).scrollTop()
    // console.log(scrollTop)

    if (scrollTop > 400) {
        // 返回顶部显示
        $('.back_top').css('display', 'block')
    }
    // 返回顶部隐藏
    else {
        $('.back_top').css('display', 'none')
    }

    // 要求 lazyload 随着浏览器的滚动随时执行
    lazyload()


})

$('.back_top').click(function () {
    // 返回顶部，上卷高度为0
    $(document).scrollTop("0")
})

// 点击立即登录时候
$('#head').on('click','[name="login"]',function(){
    // 没登录，跳转到登录页面时候
    if( myGetCookie().login===undefined){
        // 记录从列表页跳到登录页
        window.localStorage.setItem('url', 'list')
    }
})
